<template>
    <div class="property-panel" ref="propertyPanel">
        <el-tabs type="border-card" style="height: calc(100vh - 180px)">
            <el-tab-pane label="基本属性">
                <el-form
                        :model="process"
                        :rules="processFormRules"
                        ref="processForm"
                        label-width="80px"
                        size="small"
                >
                    <el-form-item label="流程分类" prop="category">
                        <el-select v-model="process.category" placeholder="请选择">
                            <el-option
                                    v-for="item in categories"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流程名称" prop="processName">
                        <el-input v-model="process.processName"></el-input>
                    </el-form-item>
                    <el-form-item label="流程Key" prop="key">
                        <el-input v-model="process.key"></el-input>
                    </el-form-item>
                    <el-form-item label="流程描述" prop="description">
                        <el-input
                                type="textarea"
                                :rows="3"
                                v-model="process.description"
                                resize="none"
                                :maxlength="150"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="modelForm" ref="modelForm" label-width="80px" size="small">
                    <el-form-item label="节点定义" v-if="element">
                        <el-input v-model="modelForm.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="节点名称" v-if="element">
                        <el-input v-model="modelForm.name" @input="nameChange"></el-input>
                    </el-form-item>
                    <el-form-item label="表单url" v-if="userTask">
                        <el-input v-model="modelForm.formKey" @input="(value)=>addFormKey({formKey: value})"></el-input>
                    </el-form-item>
                    <el-form-item label="节点颜色" v-if="element">
                        <el-color-picker v-model="modelForm.color" @active-change="colorChange"></el-color-picker>
                    </el-form-item>
                    <!-- 任务节点允许选择人员 -->
                    <el-form-item label="节点人员" v-if="userTask">
                        <el-select v-model="modelForm.userType" placeholder="请选择" @change="typeChange">
                            <el-option value="assignee" label="指定人员"></el-option>
                            <el-option value="candidateUsers" label="候选人员"></el-option>
                            <el-option value="candidateGroups" label="角色/岗位"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 指定人员 -->
                    <el-form-item label="指定人员" v-if="userTask && modelForm.userType === 'assignee'">
                        <el-select
                                v-model="modelForm.assignee"
                                placeholder="请选择"
                                key="1"
                                @change="(value) => addUser({assignee: value})"
                        >
                            <el-option v-for="item in users" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 候选人员 -->
                    <el-form-item
                            label="候选人员"
                            v-else-if="userTask && modelForm.userType === 'candidateUsers'"
                    >
                        <el-select
                                v-model="modelForm.candidateUsers"
                                placeholder="请选择"
                                key="2"
                                multiple
                                @change="(value) => addUser({candidateUsers: value.join(',') || value})"
                        >
                            <el-option v-for="item in users" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 角色/岗位 -->
                    <el-form-item
                            label="角色/岗位"
                            v-else-if="userTask && modelForm.userType === 'candidateGroups'"
                    >
                        <el-select
                                v-model="modelForm.candidateGroups"
                                placeholder="请选择"
                                @change="(value) => addUser({candidateGroups: value})"
                        >
                            <el-option v-for="item in roles" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 分支允许添加条件 -->
                    <el-form-item label="分支条件" v-if="sequenceFlow">
                        <el-select v-model="modelForm.user" placeholder="请选择">
                            <el-option
                                    v-for="item in users"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                            :label="item.targetRef.name"
                            v-if="exclusiveGateway"
                            v-for="(item,index)  in exclusiveGatewayTargets"
                            :key="index"
                    >
                        <el-input v-model="modelForm.formKey" @input="(value)=>addFormKey({formKey: value})"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "PropertyPanel",
        props: {
            modeler: {
                type: Object,
                required: true,
            },
            rowData: {
                type: Object,
                required: true,
            },
        },
        computed: {
            userTask() {
                if (!this.element) {
                    return;
                }
                return this.element.type === "bpmn:UserTask";
            },
            sequenceFlow() {
                if (!this.element) {
                    return;
                }
                return this.element.type === "bpmn:SequenceFlow";
            },
            exclusiveGateway() {
                if (!this.element) {
                    return;
                }
                return this.element.type === "bpmn:ExclusiveGateway";
            },
        },
        data() {
            return {
                modelForm: {
                    id: "",
                    name: "",
                    color: null,
                },
                process: {
                    processName: "",
                    key: "",
                    category: "",
                    description: "",
                },
                processFormRules: {
                    category: [{required: true, message: "请选择分类", trigger: "blur"}],
                    processName: [
                        {required: true, message: "请输入流程名称", trigger: "blur"},
                        {
                            min: 1,
                            max: 20,
                            message: "长度在 1 到 20 个字符",
                            trigger: "blur",
                        },
                    ],
                    key: [{required: true, message: "请输入流程key", trigger: "blur"}],
                },
                categories: [
                    {
                        value: "apply holiday",
                        label: "请假",
                    },
                    {
                        value: "bx",
                        label: "报销",
                    },
                ],
                element: {},
                users: [],
                roles: [],
                exclusiveGatewayTargets: [],
            };
        },
        mounted() {
            this.handleModeler();
            this.loadUserList();
            this.loadRoseList();
            //赋值流程基本属性
            if (Object.keys(this.rowData).length > 0) {
                this.process = {
                    processName: this.rowData.name,
                    key: this.rowData.key,
                    category: this.rowData.category,
                    description: JSON.parse(this.rowData.metaInfo).description,
                };
            }
        },
        methods: {
            //加载人员列表
            loadUserList() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/userInfo/list", {}).then(
                    (res) => {
                        if (res.code === 200) {
                            this.users = res.data;
                        }
                    }
                );
            },
            //加载角色
            loadRoseList() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/roleInfo/list", {}).then(
                    (res) => {
                        if (res.code === 200) {
                            this.roles = res.data;
                        }
                    }
                );
            },
            handleSave() {
                this.$emit("handleCallConfigBack", this.processName);
            },
            handleModeler() {
                // 监听节点选择变化
                this.modeler.on("selection.changed", (e) => {
                    const element = e.newSelection[0];
                    this.element = element;
                    if (element) {
                        console.log("监听节点选择变化1", element);
                        this.modelForm = {
                            ...element.businessObject,
                            ...element.businessObject.$attrs,
                        };
                        if (this.modelForm.userType === "candidateUsers") {
                            this.modelForm["candidateUsers"] =
                                this.modelForm["candidateUsers"].split(",") || [];
                        }
                        console.log(element.businessObject, this.modelForm);
                        //设置网关目标节点
                        this.exclusiveGatewayTargets = element.businessObject.outgoing;
                    } else {
                        this.modelForm = {};
                    }
                });

                //  监听节点属性变化
                this.modeler.on("element.changed", (e) => {
                    console.log("监听节点属性变化", e);
                    const {element} = e;
                    if (!element) return;
                    //  新增节点需要更新回属性面板
                    if (element.id === this.modelForm.id) {
                        this.modelForm.name = element.businessObject.name;
                        this.modelForm = {...this.modelForm};
                    }
                });
            },
            // 属性面板名称，更新回流程节点
            nameChange(name) {
                if (!this.element) return;
                const modeling = this.modeler.get("modeling");
                modeling.updateLabel(this.element, name);
            },
            //设置表单key
            addFormKey(properties) {
                this.updateProperties(
                    properties
                    // Object.assign(properties, {
                    //     userType: Object.keys(properties)[0]
                    // })
                );
            },
            // 属性面板颜色，更新回流程节点
            colorChange(color) {
                const modeling = this.modeler.get("modeling");
                modeling.setColor(this.element, {
                    fill: null,
                    stroke: color,
                });
                modeling.updateProperties(this.element, {color: color});
            },
            // 任务节点配置人员
            addUser(properties) {
                this.updateProperties(
                    properties
                    // Object.assign(properties, {
                    //     userType: Object.keys(properties)[0]
                    // })
                );
            },
            // 切换人员类型
            typeChange() {
                const types = ["assignee", "candidateUsers", "candidateGroups"];
                types.forEach((type) => {
                    delete this.element.businessObject.$attrs[type];
                    delete this.modelForm[type];
                });
            },
            // 在这里我们封装一个通用的更新节点属性的方法
            updateProperties(properties) {
                const modeling = this.modeler.get("modeling");
                modeling.updateProperties(this.element, properties);
            },
        },
    };
</script>

<style lang="scss" scoped>
</style>
